import { useProps } from '@ray-js/panel-sdk';
import { Text, View } from '@ray-js/ray';
import { Picker } from '@ray-js/smart-ui';
import React, { useCallback, useRef } from 'react';
import BottomComfimView from '../BottomComfimView';
import styles from './index.module.less';
import Strings from '@/i18n';
export function BottomDownTimerDialog({ onClick }: { onClick: (value: number) => void }) {
  const downTime = useProps(props => props.DownTimer_Set); // 响应式数据
  const initialDownTimeRef = useRef<number | null>(null); // 用于缓存初始值

  console.log('倒计时弹窗显示:downTime', downTime);

  // 只执行一次：保存初始值
  if (initialDownTimeRef.current === null) {
    if (downTime >= 1440) {
    } else {
      initialDownTimeRef.current = downTime;
    }

  }
  // 使用缓存的初始值
  const initialDownTime = initialDownTimeRef.current;

  // 计算 hourIndex 和 minuteIndex（只用一次）
  let hourIndex = Math.floor(initialDownTime / 60);
  let minuteIndex = initialDownTime % 60;

  if (initialDownTime === 0) {
    hourIndex = 0;
    minuteIndex = 1;
    initialDownTimeRef.current = 1;//默认给1分钟
  }
  console.log('检查是否重新渲染');

  const columns = [
    {
      values: new Array(24).fill(1).map((x, i) => i.toString().padStart(2, '0')),
      style: { flex: 'none', width: 'auto', minWidth: '61px' },
      defaultIndex: hourIndex,
    },
    {
      values: new Array(60).fill(1).map((x, i) => i.toString().padStart(2, '0')),
      style: { flex: 'none', width: 'auto', minWidth: '61px' },
      defaultIndex: minuteIndex,
    },
  ];

  const onChange = useCallback(event => {
    const { value } = event.detail;
    const allMin = parseInt(value[0]) * 60 + parseInt(value[1]);
    initialDownTimeRef.current = allMin;
    console.log('选择器结果', `value:${value},总的分钟数:${allMin},valuse:${initialDownTimeRef.current}`);
  }, []);

  function onSave() {
    console.log('打印点击保存时的值', `valuse:${initialDownTimeRef.current}`);
    onClick(initialDownTimeRef.current);
    console.log('点击了保存-999')
  }

  function onCancle() {
    console.log('点击了取消-999')
    onClick(-1);
  }

  return (
    <View className={styles.overlayout} >
      <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }} onClick={(e) => onClick(-1)} />
      <View className={styles.view}>
        <View className={styles.background} style={{ justifyContent: 'center', alignItems: 'center', paddingLeft: '30rpx', paddingRight: '30rpx' }}>
          <Text style={{ flex: 1, color: 'white', fontSize: '20px', textAlign: 'center' }}>{Strings.getLang('m_timer')}</Text>
        </View>
        <View style={{ display: 'flex', position: 'relative', width: '100%', height: 'fit-content', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingLeft: '30rpx', paddingRight: '30rpx' }}>
          <Picker
            itemHeight={34}
            className={styles.picker}
            columns={columns}
            onChange={onChange}
          />
          <View style={{ pointerEvents: 'none', position: 'absolute', width: '50vw', height: '65rpx', backgroundColor: 'rgba(255, 255, 255, 0.1)', borderRadius: '16rpx', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }} />
        </View>
        <View style={{ height: '125rpx' }} />
      </View>
      <BottomComfimView onCancle={onCancle} onSave={onSave} />
    </View>
  );
}

export default BottomDownTimerDialog;